<template>
  <view class="tabs">
    <view class="tabs__content">
      <u-tabs :list="data"
              :active-style="activeStyle"
              :inactive-style="inactiveStyle"
              :line-width="lineWidth"
              :line-height="lineHeight"
              :line-color="lineColor"
              :scrollable="scrollable"
              :itemStyle="itemStyle"
              :current="current"
              @click="tabsClick"
      >
      </u-tabs>
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: "lr-tabs",
  props: {
    /**菜单列表*/
    data: {
      type: Array,
    },
    /**菜单选择中时的样式*/
    activeStyle: {
      type: Object,
      default: () => {
        return {
          color: '#2289FF',
          fontSize: '32rpx',
          fontWeight: 500
        }
      }
    },
    /**菜单非选中时的样式*/
    inactiveStyle: {
      type: Object,
      default: () => {
        return {
          color: '#181818',
          fontSize: '32rpx'
        }
      }
    },
    /**滑块高度*/
    lineHeight: {
      type: String,
      default: '4rpx'
    },
    /**滑块长度*/
    lineWidth: {
      type: String,
      default: '60rpx'
    },
    /**滑块颜色*/
    lineColor: {
      type: String
    },
    /**菜单是否可滚动*/
    scrollable: {
      type: Boolean,
      default: true
    },
    /**菜单item的样式*/
    itemStyle: {
      type: Object,
      default: () => {
        return {
          height: '88rpx',
          padding: '0 20rpx'
        }
      }
    },
    /**默认选中*/
    current: {
      type: Number,
      default: 0
    }
  },
  methods: {
    tabsClick(e){
      this.$emit("click", e)
    }
  }
}
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  align-items: center;
  overflow: hidden;

  &__content {
    flex: 1;
    margin: 0 -20rpx;
  }
}
</style>
